<template>
    <div id="app">
        <div class="swiper">
            <div class="img-box" id="img-box">
                <img v-for="(img,idx) in img_list" :key="idx" :src="img" alt="">
            </div>
            <ul>
                <li v-for="(el,idx) in img_num" :key="idx" :class="{'active':idx == current_id}" @click="change(idx)"></li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                img_list:["img/s1.jpg","img/s2.jpg","img/s3.jpg"],
                img_num:[],
                current_id:0
            }
        },
        mounted:function(){
            this.load();
        },
        methods:{
            load(){
                var len = this.img_list.length;
                if(len > 0){
                    for(var i=1;i<=len;i++){
                        this.img_num.push(i);
                    }
                }
                var that = this;
                setInterval(function(){
                    that.change()
                },3000);
            },
            change(){
                this.current_id = this.current_id + 1;
                if(this.current_id < 0){
                    this.current_id = 0;
                }
                if(this.current_id >= this.img_list.length){
                    this.current_id = 0;
                }
                var obj = document.getElementById("img-box");
                var w = obj.offsetWidth;
                obj.style.marginLeft = -this.current_id * w + 'px';
            }
        }
    }
</script>
<style>
    .swiper{
        width:90%;
        height:200px;
        margin:30px auto;
        border-radius:16px;
        overflow: hidden;
    }
    .img-box{
        width:100%;
        height:200px;
        display: flex;
        transition:margin-left 1s;
    }
    .img-box img{
        width:100%;
        height:200px;
        flex:0 0 auto;
    }
    .swiper ul{
        padding:0;
        width: 150px;
        height:5px;
        display:flex;
        margin:-20px auto;
        justify-content: space-between;
    }
    .swiper li{
        list-style: none;
        width: 35px;
        height:5px;
        background-color:#fff;
        opacity:0.7;
    }
    .swiper .active{
        opacity:1;
    }
</style>